<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
      :loading="loading"
    />
    <AndEnergyDlg
      v-if="dlgVisible"
      :row="currentRow"
      :visible.sync="dlgVisible"
      :type="dlgType"
      @refresh="refresh"
    />
  </div>
</template>
<script>
import Big from 'big.js'
import TableSearch from '@/components/TableSearch'
import { queryAndEnergyList } from '@/api/mySelf'
import AndEnergyDlg from './components/AndEnergyDlg'
import formatter from '@/utils/format'
export default {
  name: 'AndEnergyList',
  components: { TableSearch, AndEnergyDlg },
  data() {
    return {
      loading: false,
      dlgVisible: false,
      dlgType: 'add',
      dlgTitle: '',
      currentRow: {},
      tableBtns: [
        {
          label: '新增',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/myInformation-management/merchantHycEnergy/新增',
        },
        {
          label: '下载批量赠送模板',
          isDownload: true,
          href: require('../../assets/batchTemplate/时长卡批量赠送模板.xlsx'),
          // href: 'static/img/404.0f4076ef.jpg',
          click: this.handleDownload,
          fileName: '和能量批量赠送模板',
        },
      ],
      searchPath: '/web/myInformation-management/merchantHycEnergy/查询',
      formItemsInline: [
        {
          type: 'select',
          clearable: true,
          placeholder: '请选择状态',
          options: [
            {
              label: '发售中',
              value: 'ON_SALE',
            },
            {
              label: '已下架',
              value: 'OFF_SALE',
            },
          ],
          value: 'type',
          resourceId: '/web/myInformation-management/merchantHycEnergy/状态',
        },
      ],
      columns: [
        {
          label: '创建时间',
          prop: 'createTime',
          formatter,
          resourceId:
            '/web/myInformation-management/merchantHycEnergy/创建时间',
        },
        {
          label: '套餐有效期(天)',
          prop: 'effectiveDays',
          formatter: (item) => {
            return item.effectiveDays ? item.effectiveDays : '长期'
          },
          resourceId:
            '/web/myInformation-management/merchantHycEnergy/套餐有效期(天)',
        },
        {
          label: '包含和能量(点)',
          prop: 'energyAmount',
          resourceId:
            '/web/myInformation-management/merchantHycEnergy/包含和能量（点）',
        },
        {
          label: '价值(元)',
          // prop: 'energyAmount',
          formatter: (row) => {
            return new Big(row.energyAmount / 100).toFixed(2)
          },
          resourceId:
            '/web/myInformation-management/merchantHycEnergy/价值（元）',
        },
        {
          label: '售价(元)',
          prop: 'price',
          formatter: (row) => {
            return new Big(row.price / 100).toFixed(2)
          },
          resourceId:
            '/web/myInformation-management/merchantHycEnergy/售价（元）',
        },
        {
          label: '状态',
          prop: 'type',
          formatter: (item) => {
            if (item.type === 'OFF_SALE') return '已下架'
            else if (item.type === 'ON_SALE') return '发售中'
          },
          resourceId: '/web/myInformation-management/merchantHycEnergy/状态',
        },
        {
          label: '操作',
          resourceId: '/web/myInformation-management/merchantHycEnergy/操作',
          buttons: [
            {
              label: '下架',
              class: 'table-button-green',
              click: (row) => {
                this.dlgVisible = true
                this.currentRow = row
                this.dlgType = 'update'
              },
              ifRender: (row) => {
                return row.type === 'ON_SALE'
              },
              resourceId:
                '/web/myInformation-management/merchantHycEnergy/下架',
            },
            {
              label: '上架',
              class: 'table-button-blue',
              click: (row) => {
                this.dlgVisible = true
                this.currentRow = row
                this.dlgType = 'update'
              },
              ifRender: (row) => {
                return row.type === 'OFF_SALE'
              },
              resourceId:
                '/web/myInformation-management/merchantHycEnergy/上架',
            },
            {
              label: '编辑',
              click: (row) => {
                this.$router.push(`/myself/andEnergyEdit/${row.id}`)
              },
              resourceId:
                '/web/myInformation-management/merchantHycEnergy/编辑',
            },
            {
              label: '赠送',
              click: (row) => {
                this.dlgVisible = true
                this.currentRow = row
                this.dlgType = 'present'
                this.dlgTitle = '赠送时长卡'
              },
              resourceId:
                '/web/myInformation-management/merchantHycEnergy/赠送',
            },
            {
              label: '批量赠送',
              click: (row) => {
                this.dlgVisible = true
                this.currentRow = row
                this.dlgType = 'batch'
                this.dlgTitle = '批量赠送'
              },
              resourceId:
                '/web/myInformation-management/merchantHycEnergy/批量赠送',
            },
            {
              label: '删除',
              click: (row) => {
                this.dlgVisible = true
                this.currentRow = row
                this.dlgType = 'delete'
              },
              ifRender: (row) => {
                return row.type === 'OFF_SALE'
              },
              resourceId:
                '/web/myInformation-management/merchantHycEnergy/删除',
            },
          ],
        },
      ],
      tableData: {},
      form: {},
    }
  },
  props: {},
  methods: {
    handleDownload() {},
    refresh() {
      this.$refs.tableSearch.refreshTable()
    },
    handleTableData(params) {
      this.loading = true
      queryAndEnergyList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
    handleAdd() {
      this.$router.push('/myself/andEnergyAdd')
    },
  },
}
</script>
